<template>
  <div class="app-container">
    <h2 style="text-align: center">添加历史人物</h2>

    <el-steps
      :active="3"
      process-status="wait"
      align-center
      style="margin-bottom: 40px"
    >
      <el-step title="人物基本信息" />
      <el-step title="人物地点" />
      <el-step title="人物总结" />
    </el-steps>

    <el-form label-width="120px" align="right">
      <wangeditor ref="editor" :key="2"></wangeditor>

      <el-form-item style="margin-top: 10px">
        <el-upload
          :on-success="handleVodUploadSuccess"
          :on-remove="handleVodRemove"
          :before-remove="beforeVodRemove"
          :on-exceed="handleUploadExceed"
          :file-list="fileList"
          :action="BASE_API + '/gis/video/uploadVideo'"
          :limit="1"
          class="upload-demo"
        >
          <el-button size="small" type="primary">上传视频</el-button>
          <el-tooltip placement="right-end">
            <div slot="content">
              最大支持1G，<br />
              支持3GP、ASF、AVI、DAT、DV、FLV、F4V、<br />
              GIF、M2T、M4V、MJ2、MJPEG、MKV、MOV、MP4、<br />
              MPE、MPG、MPEG、MTS、OGG、QT、RM、RMVB、<br />
              SWF、TS、VOB、WMV、WEBM 等视频格式上传
            </div>
            <i class="el-icon-question" />
          </el-tooltip>
        </el-upload>
        <el-form-item v-if="goBackVideo">
          <el-input
            :readonly="true"
            v-model="summaryInfo.videoOriginalName"
            style="width: 220px; padding-right: 20px"
          />
          <el-button size="small" type="primary" @click="handleVodRemove"
            >删除视频</el-button
          >
        </el-form-item>
      </el-form-item>

      <el-form-item align="right">
        <el-button @click="previous">上一步</el-button>
        <el-button :disabled="saveBtnDisabled" type="primary" @click="next"
          >确定</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import figureSummary from "@/api/figure/figure_summary";
import wangeditor from "@/components/wangeditor";
export default {
  components: { wangeditor },
  data() {
    return {
      saveBtnDisabled: false, // 保存按钮是否禁用
      figureId: "",
      summaryInfo: {
        id: "",
        summary: "",
        videoSourceId: "",
        videoOriginalName: "",
      },
      BASE_API: process.env.BASE_API, // 接口API地址
      fileList: [], //上传文件列表
      goBackVideo: false, //是否显示文件
    };
  },
  created() {
    if (this.$route.params && this.$route.params.id) {
      // params.id 中 id 和路由中的 占位符有关系
      this.figureId = this.$route.params.id;
      this.getFigureSummary();
    }
  },
  methods: {
    // 上一步
    previous() {
      this.summaryInfo.summary = this.$refs.editor.getContent();
      this.summaryInfo.id = this.figureId;
      this.$confirm("是否保存?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          figureSummary.saveOrUpdateSummary(this.summaryInfo).then((res) => {
            this.$message({
              type: "success",
              message: res.message,
            });
          });
          this.$router.push({ path: "/figure/location/" + this.figureId });
        })
        .catch(() => {
          this.$router.push({ path: "/figure/location/" + this.figureId });
        });
    },
    // 下一步
    next() {
      this.summaryInfo.summary = this.$refs.editor.getContent();
      this.summaryInfo.id = this.figureId;
      this.$confirm("是否保存?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          figureSummary.saveOrUpdateSummary(this.summaryInfo).then((res) => {
            this.$message({
              type: "success",
              message: res.message,
            });
          });
          this.$router.push({ path: "/figure/infoList/" });
        })
        .catch(() => {
          // this.$router.push({ path: "/figure/list/" });
        });
    },
    getFigureSummary() {
      figureSummary.getFigureSummary(this.figureId).then((res) => {
        this.summaryInfo = res.data.figureSummary;
        this.$refs.editor.editor.txt.html(this.summaryInfo.summary)
        if (
          this.summaryInfo.videoSourceId &&
          this.summaryInfo.videoOriginalName
        ) {
          this.goBackVideo = true;
        }
      });
    },
    //视频上传成功执行的方法
    handleVodUploadSuccess(response, file, fileList) {
      // 提示信息
      this.$message({
        type: "success",
        message: response.message,
      });

      // 上传视频的id赋值
      this.summaryInfo.videoSourceId = response.data.videoId;
      this.summaryInfo.videoOriginalName = file.name;
      this.goBackVideo = false;
    },

    // 移除视频的方法
    handleVodRemove() {
      video.removeVideo(this.summaryInfo.videoSourceId).then((res) => {
        this.$message({
          type: "success",
          message: res.message,
        });
        // 清空文件列表
        this.fileList = [];
        this.summaryInfo.videoSourceId = "";
        this.summaryInfo.videoOriginalName = "";
        this.goBackVideo = false;
      });
    },

    // 移除之前
    beforeVodRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },

    handleUploadExceed() {
      this.$message.warning("想要重新上传视频，请先删除已上传的视频");
    },
  },
};
</script>
